<template>
    <div class="table-page-search-wrapper">
        <a-spin :spinning="confirmLoading" tip="Loading...">
            <LForm ref="leaveTestForm" @onClick="emitClickHandler" @onChange="emitChangeHandler" :formAttributes="formAttributes" :mostColumns="mostColumns" :labelCol="labelCol" :wrapperCol="wrapperCol"></LForm>
        </a-spin>
        

        <div class="button-panel">
            <!-- <a-popconfirm title="确定放弃操作？" @confirm="cancel" okText="确定" cancelText="取消">
                <a-button shape="round" style="margin-right: .8rem">取消</a-button>
            </a-popconfirm>
            <a-button shape="round" style="margin-right: .8rem">取消</a-button> -->
            <a-button shape="round" @click="saveData" type="primary" >保存</a-button>
            <a-button shape="round" @click="openCommit" type="primary" >提交</a-button>

        </div>

        <commit-modal ref="leaveCommit" @handleOk="commitForm"></commit-modal>
    </div>
</template>

<script>
import LForm from '@/components/lt/form/LForm'
import commitModal from '@/views/flowable/view/commitModal'
import pick from 'lodash.pick'
import request from '@/utils/flowRequest'
import notification from 'ant-design-vue/es/notification'

export default {
    name: 'leaveTestForm',
    components: { LForm, commitModal },
    props: {
        componentParam:{
            type:Object,
            default:()=>{}
        }
    },
    data() {
        return {
            confirmLoading: false,
            url: {
                queryByInstanceId: '/leaveInfo/queryByInstanceId',
                commitForm: '/leaveInfo/commitForm',
                saveForm: '/leaveInfo/saveForm'
            },
            taskInfo: {},
            formData: {},
            mostColumns: 1,
            labelCol: {sm: { span: 6 }},
            wrapperCol: {sm: { span: 18 }},
            formAttributes: {
                type:'',
                formItems: [
                    {
                        title:'请假申请',
                        columns:1,
                        fields:[
                            {field:'userId',label:'请假人编号',component:'input', disabled:true},
                            {field:'userName',label:'请假人姓名',component:'input', disabled:true},
                            {field:'applyTime',label:'申请时间',component:'time', disabled:true},
                            {field:'leaveNum',label:'请假天数',component:'input', disabled:true},
                            {field:'startTime',label:'请假开始时间',component:'time', disabled:true},
                            {field:'endTime',label:'请假结束时间',component:'time', disabled:true},
                            {field:'leaveReason',label:'请假原因',component:'textarea', disabled:true},
                            {field:'approvalOpinion',label:'审批记录',component:'textarea', disabled:true},
                        ]
                    }
                ]
            },
        }
    },
    watch: {
        'componentParam': {
            deep: true,
            immediate: true,
            handler(newV, oldV) {
                if (newV) {
                    this.taskInfo = newV
                    this.formData = {}
                    this.$nextTick(() => {
                        this.$refs['leaveTestForm'].getForm().resetFields()
                        this.getFormData()
                    })
                } else {
                    this.taskInfo = {}
                    this.formData = {}
                    this.$nextTick(() => {
                        this.$refs['leaveTestForm'].getForm().resetFields()
                    })
                }
                
            }
        }
    },
    methods: {
        saveData() {

        },
        openCommit() {
            this.$refs['leaveCommit'].open(this.taskInfo)
        },
        getFormData() {
            request.get(this.url.queryByInstanceId,{params:{instanceId: this.taskInfo.procInstId}}).then(res => {
                if(res.success){
                    this.formData = res.result
                    this.$refs['leaveTestForm'].getForm().setFieldsValue(pick(res.result, 'userId','userName', 'applyTime', 'leaveNum','leaveReason','startTime','endTime'))
                    //审批意见显示
                    if (res.result.remarks) {
                        this.$refs['leaveTestForm'].getForm().setFieldsValue({approvalOpinion: res.result.remarks})
                    }
                    //this.$message.success(res.message);
                } else {
                    notification.error({ message: '系统提示', description: res.message || "执行出现错误"})
                }
            })
        },
        emitChangeHandler(changeItem) {
            this.$emit('handlerChange',changeItem);
        },
        emitClickHandler(field,form) {
            this.$emit('handlerClick',field,form);
        },
        commitForm(data) {
            let param = {}
            param = Object.assign({}, param, this.formData)
            param.templateId = this.taskInfo.templateId
            param.taskId = this.taskInfo.id
            if (data) {
                param = Object.assign({}, param, data)
            }
            //param.approvalOpinion = '通过'
            this.confirmLoading = true
            request({url: this.url.commitForm, method: 'post', data:param}).then(res => {
                if(res.success){
                    this.formData = res.result
                    this.$message.success(res.message);
                } else {
                    notification.error({ message: '系统提示', description: res.message || "执行出现错误"})
                }
            }).finally(() => {
                this.confirmLoading = false
            })
        }
    }
}
</script>

<style scoped>
.button-panel {
    text-align: right;
}
</style>